<template>
  <CommonPanel title="全量设备运维统计">
    <template #opt>
      <div>
        <CustomBtn v-for="(i, v) in btnList" :key="v" @click="customActive(v)" :active="v === index ? true : false">
          {{ i.name }}</CustomBtn>
      </div>
    </template>
    <div class="content-box1">
      <div class="content-box1_top">
        设备资源总数
        <span>{{ devices_num.counts }}</span>
      </div>
      <div class="content-box1_bottom">
        <div class="echart-box">
          <CommonChart ref="myChart" :option="option" />
        </div>
        <div class="connent-box">
          <div class="connent-box_top">
            <div class="value-box">{{ devices_num.line }}</div>
            <div class="text-box">在线检查</div>
          </div>
          <div class="connent-box_bottom">
            <div class="value-box">{{ devices_num.offline }}</div>
            <div class="text-box">离线设备</div>
          </div>
        </div>
      </div>
    </div>
  </CommonPanel>
</template>

<script setup>
import * as echarts from "echarts";
import { computed, reactive, watch } from "vue";
import { ref, onMounted } from "vue";
import { defineEmits } from 'vue'
const emit = defineEmits(['refresh'])

const props = defineProps({
  dataList: {
    type: Array,
    default: () => [],
  },
});

const btnList = ref([
  {
    name: "今日",
  },
  {
    name: "近一周",
  },
  {
    name: "近一月",
  },
]);
const index = ref(0);
let num = ref(0);
const myChartRef = ref(null);
const myChart = ref(null);
onMounted(() => {
  if (myChartRef.value) {
    myChart = echarts.init(myChartRef.value);
  }
});
let devices_num = reactive({
  line: 0,
  offline: 0,
  not_detected: 0,
  counts: 0
})
watch(
  () => props.dataList,
  () => {
    devices_num.line = props.dataList.line
    devices_num.offline = props.dataList.offline
    devices_num.not_detected = props.dataList.not_detected
    devices_num.counts = props.dataList.counts

  }
);
function customActive(v) {
  index.value = v;
  emit('refresh', v)
}
function numb() {
  num = num + 5;
  myChart.setOption(option, true);
}


const option = computed(() => {
  return {
    title: [
      {
        text: "在线率",
        x: "center",
        top: "54%",
        textStyle: {
          color: "#9BA3AE",
          fontSize: 15,
          fontWeight: "100",
        },
      },
      {
        text: Math.trunc((devices_num.counts / devices_num.line)) + "%",
        x: "center",
        top: "35%",
        textStyle: {
          fontSize: "20",
          color: "#FCE598",
          fontFamily: "Lato",
          foontWeight: "600",
        },
      },
    ],
    polar: {
      radius: ["74%", "80%"],
      center: ["50%", "50%"],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "",
        type: "bar",
        roundCap: true,
        barWidth: 60,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(66, 66, 66, .3)",
        },
        data: [(devices_num.counts / devices_num.line)],
        coordinateSystem: "polar",

        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#F9C65A",
              },
              {
                offset: 1,
                color: "#815326",
              },
            ]),
          },
        },
      },
    ],
  };
});
</script>

<style lang="scss" scoped>
.content-box1 {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 16px 6px;
  flex-direction: column;

  &_top {
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #9ba3ae;

    span {
      font-weight: 600;
      font-size: 24px;
      color: #65e3f8;
    }
  }

  &_bottom {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;

    .echart-box {
      flex: 0.7;
      height: 100%;
    }

    .connent-box {
      flex: 1.3;
      height: 100%;
      display: grid;
      grid-template-rows: 1fr 1fr;
      grid-row-gap: 5px;

      &_top {
        background: url("../../../assets/image/device1.png") no-repeat center 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      &_bottom {
        background: url("../../../assets/image/device2.png") no-repeat center 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .value-box {
        margin-left: 50%;
        color: #fff;
        font-size: 24px;
      }

      .text-box {
        margin-left: 50%;
        margin-top: 10px;
        color: #fff;
        font-size: 14px;
      }
    }
  }
}
</style>
